<template>
  <el-table :height="calTableHeight() - 50" ref="TableRef" :data="data">
    <el-table-column type="index" :label="$t('序号')" width="60" align="center" />
    <!-- 包裹号 ，订单号 ，sku费用 ，运费 ，捆包费 ，手续费 ，sku追加    -->
    <el-table-column show-overflow-tooltip :label="$t('包裹号')" align="center" prop="packageNo" />
    <el-table-column show-overflow-tooltip :label="$t('订单号')" align="center" prop="orderNos" />
    <el-table-column show-overflow-tooltip :label="$t('sku费用')" align="center" prop="skuFee">
      <template #default="{ row }">
        {{ row.skuFee ? (+row.skuFee).toFixed() : '' }}
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip :label="$t('运费')" align="center" prop="deliveryFee">
      <template #default="{ row }">
        {{ row.deliveryFee ? (+row.deliveryFee).toFixed() : '' }}
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip :label="$t('捆包费')" align="center" prop="bundleFee">
      <template #default="{ row }">
        {{ row.bundleFee ? (+row.bundleFee).toFixed() : '' }}
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip :label="$t('手续费')" align="center" prop="commission">
      <template #default="{ row }">
        {{ row.commission ? (+row.commission).toFixed() : '' }}
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip :label="$t('sku追加')" :width="width" align="center" prop="afterExpireDate">
      <template #default="{ row }">
        <div class="sku-list">
          <div v-for="item in row.skus" class="sku-list-item">
            <div class="skuNo">{{ item.skuNo }}</div>
            <el-image
              fit="contain"
              :key="Math.random()"
              v-hover="item.imgUrl"
              style="width: 35px; height: 35px"
              :src="item.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
            <div>{{ item.orderSkuNum }}</div>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import handleTableSum from '@/utils/handleSum'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * data
     */
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  computed: {
    width: function () {
      return this.data[0]?.skus?.length * 170
    },
  },
  methods: {
    handleSum(param) {
      /**
       * 需要进行统计的字段
       */
      const data = handleTableSum(param, [])
      return data
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.sku-list {
  display: flex;
  white-space: nowrap;

  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 0 2px;
    margin-right: 5px;
    gap: 8px;

    .skuNo {
      white-space: nowrap;
    }
  }
}
</style>
